<template>
	<div class="wrap">
		<h2 class="title">卫生检查记录</h2>


		<!-- 表格展示区域 -->
		<div class="info">
			<el-table :data="tableData" stripe :highlight-current-row="true" height="500">
				<el-table-column prop="buildId" label="楼栋" width="180" />
				<el-table-column prop="dorNumber" label="寝室号" width="180" />
				<el-table-column prop="checkPerson" label="检查人员" />
				<el-table-column prop="checkTime" label="检查时间">
					<template #default="{ row }">
						{{ new Date(row.checkTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column prop="checkSore" label="检查分数" />
				<el-table-column prop="hygDes" label="卫生问题" />
				<el-table-column prop="createTime" label="创建时间">
					<template #default="{ row }">
						{{ new Date(row.createTime).toLocaleDateString() }}
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间">
					<template #default="{ row }">
						{{ new Date(row.updateTime).toLocaleDateString() }}
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<div class="demo-pagination-block">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:page-sizes="pageSizes"
					small="small"
					:background="true"
					layout="total, sizes, prev, pager, next"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script setup>
import {onMounted, ref } from 'vue'
import { getHygOneBuild } from '@/utils/axios/getTotal'
import { useUserStore } from '@/stores/userStore'
import { getSanitaryLog } from '@/utils/axios/stuReqest'

const { userInfo } = useUserStore()
const tableData = ref([])


// 分页
const total = ref(0)
const pageSizes = [20, 40, 80, 100]
// 每页显示条数
const pageSize = ref(20)
// 当前页
const currentPage = ref(1)

const handleSizeChange = async(val) => {
  let { data } = await getSanitaryLog({ currentPage: currentPage.value, pageSize: val })
  tableData.value = data
}

// 当前页发送变化事件
const handleCurrentChange = async(val) => {
  let { data } = await getSanitaryLog({ currentPage: val, pageSize: pageSize.value })
  tableData.value = data
}

onMounted(async () => {
	let res = await getHygOneBuild({ buildId: parseInt(userInfo.buildId) })
	let { data } = await getSanitaryLog({ currentPage: currentPage.value, pageSize: pageSize.value })
	total.value = res.data
	tableData.value = data
})
</script>

<style scoped lang="sass">


.el-table
  box-shadow: 0 0 5px #cccc
  border-radius: 10px
  width: 100%
  // padding: 10px

.demo-pagination-block
  margin-top: 10px
.wrap
  border-radius: 10px
  // box-shadow: 0 0 5px #cccc
  height: 100%
  min-height: 600px
  padding: 20px

.title
  font-size: var(--title-size)
  font-weight: var(--fontweight)
  margin-bottom: 30px
</style>
